<template>

  <div>
    <!--图表统计  -->
    <div>
      <el-row :gutter="24" style="margin-top:50px; margin-bottom:50px;">
        <el-col :span="12">
          <line-chart :x-data="dateArray" :series="series" :title-data="titleData" />
        </el-col>
        <el-col :span="12">
          <pie-chart :name="pieChartName" :title-name="pieChartTitle" :chart-name-data="pieChartNameData" :chart-data="pieChartData" />
        </el-col>
      </el-row>
    </div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template slot="filter-content">

        <el-input v-model="listQuery.params.realName" placeholder="搜索人员" style="width: 200px;" class="filter-item" />

      </template>

      <template slot="data-columns">

        <el-table-column
          label="人员"
          prop="realName"
          align="center"
        />

        <el-table-column
          label="考试次数"
          prop="tryCount"
          align="center"
        />

        <el-table-column
          label="最高分"
          prop="maxScore"
          align="center"
        />

        <el-table-column
          label="是否通过"
          align="center"
        >

          <template slot-scope="scope">
            <span v-if="scope.row.passed" style="color: #00ff00;">通过</span>
            <span v-else style="color: #ff0000;">未通过</span>
          </template>

        </el-table-column>

        <el-table-column
          label="最后考试时间"
          prop="updateTime"
          align="center"
        />

        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleExamDetail(scope.row.examId, scope.row.userId)">考试明细</el-button>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog title="考试明细" :visible.sync="dialogVisible" width="60%">

      <div class="el-dialog-div">
        <my-paper-list :exam-id="examId" :user-id="userId" />
      </div>

    </el-dialog>

  </div>

</template>

<script>
import LineChart from '@/components/EChart/LineChart'
import PieChart from '@/components/EChart/PieChart'
import DataTable from '@/components/DataTable'
import MyPaperList from './paper'
import { staticExamData } from '@/api/exam/exam'

export default {
  name: 'ExamUserList',
  components: { MyPaperList, DataTable, LineChart, PieChart },
  data() {
    return {

      dialogVisible: false,
      examId: '',
      userId: '',

      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          realName: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/exam/api/user/exam/paging'
      },

      dateArray: ['考生数', '阅卷数'],
      titleData: ['已完成', '未完成'],
      series: [{
        name: '已完成',
        smooth: true,
        type: 'bar',
        itemStyle: {
          normal: {
            color: '#3888fa',
            lineStyle: {
              color: '#3888fa',
              width: 2
            },
            areaStyle: {
              color: '#f3f8ff'
            }
          }
        },
        data: [],
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      },
      {
        name: '未完成',
        smooth: true,
        type: 'bar',
        itemStyle: {
          normal: {
            color: '#fd1d27',
            lineStyle: {
              color: '#fd1d27',
              width: 2
            },
            areaStyle: {
              color: '#f3f8ff'
            }
          }
        },
        data: [],
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      }],
      pieChartTitle: '考生分数区间占比',
      pieChartName: '区间人数信息',
      // pieChartNameData: ['测试数据一', '测试数据二', '测试数据三', '测试数据四'],
      pieChartData: [
        { value: 0, name: '优秀' },
        { value: 0, name: '合格' },
        { value: 0, name: '不及格' },
        { value: 0, name: '未阅卷' },
        { value: 0, name: '未考试' }
      ]
    }
  },

  created() {
    const examId = this.$route.params.examId
    this.listQuery.params.examId = examId
    this.getExamData(examId)
  },
  methods: {

    getExamData(examId) {
      staticExamData(examId).then(response => {
        const examData = response.data
        this.series[0].data.push(examData.examNum)
        this.series[0].data.push(examData.reviewNum)
        this.series[1].data.push(examData.noExamNum)
        this.series[1].data.push(examData.noReviewNum)
        this.pieChartData[0].value = examData.goodNum
        this.pieChartData[1].value = examData.passNum
        this.pieChartData[2].value = examData.noPassNum
        this.pieChartData[3].value = examData.noReviewNum
        this.pieChartData[4].value = examData.noExamNum
      })
    },

    // 考试明细
    handleExamDetail(examId, userId) {
      this.examId = examId
      this.userId = userId
      this.dialogVisible = true
    },

    handlerExamBook(examId) {
      this.$router.push({ name: 'BookList', params: { examId: examId }})
    }
  }
}
</script>

<style scoped>

  .el-dialog-div{
    height: 60vh;
    overflow: auto;
    padding: 10px;
  }

</style>
